{extend name="public/layout"}
{block name="title"}我要捐赠{/block}
{block name="head"}
<style>
    html, body {
        background-color: #fff;
    }

    .money {
        text-align: center;
    }

    .money .flex-con.active {
        background-color: #13a7eb;
        color: white;
        border-color: #13a7eb;

    }

    .money .flex-con {
        border: 1px solid #d8d8d8;
        color: #4c4c4c;

        border-radius: 4px;
        padding: 10px;
        margin-right: 5px;
        margin-bottom: 10px;

        margin-left: 5px;
    }

    .money .flex-con:first-child {
        margin-left: 0;
    }

    .money .flex-con:last-child {
        margin-right: 0;
    }

    .btn-block-area {
        margin-top: 3rem;
    }
</style>
{/block}
{block name="content"}


<div class="border-b">
    <div class="pt pb plr">
        <div class="title-line text-gray">
            请选择您要捐赠的金额
        </div>
    </div>
</div>

<div class="panel money" id="money_area">
    <div class="flex">
        <div class="flex-con" data-value="5">5元</div>
        <div class="flex-con" data-value="10">10元</div>
        <div class="flex-con" data-value="50">50元</div>
    </div>
    <div class="flex">
        <div class="flex-con" data-value="100">100元</div>
        <div class="flex-con" data-value="500">500元</div>
        <div class="flex-con" data-value="5000">5000元</div>
    </div>
    <div class="flex">
        <div class="flex-con" data-value="10000">10000元</div>
        <div class="flex-con" data-value="50000">50000元</div>
        <a class="flex-con" href="donateOther.html">&gt;50000元</a>
    </div>
</div>

<div class="btn-block-area panel">
    <div class="btn-primary btn-block btn-rounded" onclick="gotoPay()">
        我要捐赠
    </div>
</div>
{:_js('js/phone.js')}
<script>
    var money = 0;
    function gotoPay() {
        if (money <= 0) {
            ui.msg('请选择您要捐赠的金额');
            return;
        }
        location.href = "{:U('payment')}?m=" + money;
    }
    $('#money_area').on('click', 'div[data-value]', function () {
        $('#money_area').find('div[data-value]').removeClass('active');
        $(this).addClass('active');
        money = parseInt($(this).data('value'));
    });
</script>

{/block}